<template>
	<div class="zh-BanBantong">
		<div class="zh-h5">
			<span>
				<router-link to="/" tag="a">首页</router-link>
				> <span>班班通</span>
			</span>
			<div class="zh-h5-nav">
				<div 
					:class="$route.name === 'BanBantong' ? 'active' : ''"
					@click="tapedRoute()">设备管理</div>
				<div 
					:class="$route.name === 'recording-management' ? 'active' : ''" 
					@click="otherDevicesRoute()">录制管理</div>
			</div>
		</div>
		<transition name="fade" mode="out-in" v-if="view === 'BanBantong'" >
			<div class="zh-table">
				<div class="zh-table-open clear">
					<div class="zh-open-left fl">
						<div class="open-width" style="width: 270px">
							<el-input v-model="input" placeholder="请输入设备名搜索"></el-input>
						</div>
						<el-button type="primary">搜索</el-button>
					</div>
					<div class="zh-open-right fr">
						<el-button type="primary" @click="">一键升级</el-button>
						<el-button type="danger" @click="">批量删除</el-button>
					</div>
				</div>
				<div class="zh-table-contents">
					<el-table
					    :data="tableData"
					    border
					    max-height="600"
					    style="width: 100%">
					    <el-table-column
					      type="selection"
					      width="50"
					      align="center"
					      fixed>
					    </el-table-column>
					    <el-table-column
					      prop="1"
					      label="设备名"
					      align="center"
					      show-overflow-tooltip
					      >
					    </el-table-column>
					    <el-table-column
					      prop="2"
					      label="类型"
					      align="center"
					      show-overflow-tooltip
					      >
					    </el-table-column>
					    <el-table-column
					      prop="3"
					      label="所属班级"
					      align="center"
					      show-overflow-tooltip
					      >
					    </el-table-column>
					    <el-table-column
					      prop="4"
					      label="IP"
					      align="center"
					      show-overflow-tooltip
					      >
					    </el-table-column>
					    <el-table-column
					      prop="4"
					      label="网络地址"
					      align="center"
					      show-overflow-tooltip
					      >
					    </el-table-column>
					    <el-table-column
					      prop="5"
					      label="注释"
					      align="center"
					      show-overflow-tooltip
					      >
					    </el-table-column>
					    <el-table-column
					      prop="5"
					      label="状态"
					      align="center"
					      show-overflow-tooltip
					      >
					    </el-table-column>
					    <el-table-column
					      prop="5"
					      label="操作"
					      align="center"
					      width="100"
					      show-overflow-tooltip
					      >
		      		      	<template slot-scope="scope">
		      	      	        <el-button @click="" type="text">配置</el-button>
		      	      	        <el-button @click="" type="text">导播台</el-button>
		      	      	    </template>
					    </el-table-column>
					</el-table>
					<div class="table-pagination" v-if="total > 10">
						<el-pagination
						    @size-change="handleSizeChange"
						    @current-change="handleCurrentChange"
						    :current-page="currentPage"
						    :page-sizes="[10, 20, 30, 40, 50, 100]"
						    :page-size="page"
						    layout="total, sizes, prev, pager, next, jumper"
						    :total="total">
						</el-pagination>
						<div class="pagination-button">
							<el-button 
								@click=""
								type="primary" icon="el-icon-refresh" 
								circle title="刷新数据" size="mini" >
							</el-button>
						</div>
					</div>
				</div>
			</div>
		</transition>
		<transition name="fade" mode="out-in" v-if="view === 'recording-management'" >
			<zh-recording-management />
		</transition>
	</div>
</template>
<script>
  	export default {
	    data() {
		    return {
		    	view: 'BanBantong',
		        input: '',
		        tableData: [{
                  1: '煞笔',
                  2: '王小虎',
                  3: '上海',
                  4: '普陀区',
                  5: '2016-05-03'
                }],
                currentPage: 4,// 当前第几页
                total: 0,//共几条
                page: 10,// 条/页数据
		    }
		},
		created(){
	    	this.toggleView();
	    },
	    watch:{
	    	$route(){
	    		this.toggleView()
	    	},
	    },
		methods: {
			tapedRoute(){
				this.$router.push("/affairs/recorder/BanBantong")
			},
			otherDevicesRoute(){
				this.$router.push("/affairs/recorder/BanBantong/recording-management")
			},
			//记录导航状态
		    toggleView(){
		   		this.view = this.$route.name
		    },
		    handleSizeChange(val) {
		    },
		    handleCurrentChange(val) {
		    }
		},
  	}
</script>
<style lang="scss">
	.zh-BanBantong {
		.el-table__body-wrapper table tbody {
			td:nth-child(9) {
				padding: 0;
			}
		}
		.recording-management {
			.el-table__body-wrapper table tbody {
				td:nth-child(7) {
					padding: 0;
				}
			}
		}
	}
</style>